<template>
    <div class="layout-padding">
        <div class="page-search mb10" v-show="showPageSearch" v-if="$slots.search"><slot name="search"></slot></div>
        <div class="page-table layout-padding-auto layout-padding-view" id="vp-main-table">
            <vxe-toolbar ref="toolbarRef" class="p0" :custom="custom" :zoom=zoom>
                <template #buttons>
                    <slot name="actions"></slot>
                </template>
                <template #tools>
                    <el-button @click="reloadTable" circle><SvgIcon name="ele-Refresh"/></el-button>
                    <el-button @click="showPageSearch = !showPageSearch" circle v-if="$slots.search"><SvgIcon name="ele-Search"/></el-button>
                    <el-button v-if="zoom" @click="onScreenfullClick" circle><SvgIcon name="ele-FullScreen"/></el-button>
                </template>
            </vxe-toolbar>
            <slot name="table"></slot>
            <slot name="pagination"></slot>
        </div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts" name="vpMainPage">
import { ref, watch, onMounted, nextTick } from 'vue';
import screenfull from 'screenfull';
import { ElMessage } from 'element-plus';
import mittBus from '/@/utils/mitt';
import { useRoute } from 'vue-router';

    const props = defineProps({
        tableRef: {
            type: Object,
        },
        custom: {
            type: Boolean,
            default: true
        },
        zoom: {
            type: Boolean,
            default: true
        }
    });

    const emits = defineEmits(['refresh']);
    const route = useRoute();
    const showPageSearch = ref(true);

    const reloadTable = () => {
        // 刷新表格
        const table = document.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
        table?.scrollTo(0, 0);
        emits("refresh");
    }

    const toolbarRef = ref();

    onMounted(() => {
        nextTick(() => {
            if (props.tableRef) {
                const $toolbar = toolbarRef.value
                if (props.tableRef && $toolbar) {
                    props.tableRef.connect($toolbar)
                }
            }
        })
    })

    const isScreenfull = ref(false);
    // 全屏点击时
    const onScreenfullClick = () => {
        // if (!screenfull.isEnabled) {
        //     ElMessage.warning('暂不不支持全屏');
        //     return false;
        // }
        // screenfull.toggle(document.getElementById('vp-main-table')!);
        // screenfull.on('change', () => {
        //     if (screenfull.isFullscreen) isScreenfull.value = true;
        //     else isScreenfull.value = false;
        // });
        mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
    };

</script>

<style scoped>
.page-search {
    background: var(--el-color-white);
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    overflow: hidden;
    padding: 18px 10px 0;
}
.table-actions {
    display: flex;
    justify-content:space-between ;
}
.page-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    padding: 10px;
    :deep(.el-pagination) {
        display: flex;
        justify-content: center;
    }
    :deep(.vxe-tools--operate) {
        margin-left: 12px;
    }
}

</style>